<template>
	<view class="tcr-shop">
		<scroll-view class="tcr-shop-list" scroll-y="true" @scrolltolower="handleLower">
			<view v-for="item in goodsList" :key="item.id" class="tcr-shop-card">
				<view class="tcr-shop-card-img"> 
					<image v-if="item.thumbnailPic" :src="handleImagePath(item.thumbnailPic)"></image>
					<image v-else src="../../static/imgs/gzh.jpg"></image>
				</view>
				<view class="tcr-shop-card-desc">
					<view class="tcr-shop-card-desc-title tcr-ellipsis">{{ item.goodsName }}</view>
					<view class="tcr-shop-card-desc-desc">{{ item.goodsDesc }}</view>
					<view class="tcr-shop-card-desc-count">库存：{{ item.goodsTotal }}</view>
					<view class="tcr-shop-card-desc-content">
						<view class="tcr-shop-card-desc-point">积分：{{ item.goodsFenPrice }}</view>
						<view style="display: flex;align-items: center;">
							<button type="default" size="mini" @click="buyGoods(item)">兑换</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import apis from '../../apis/apis.js';
	
	export default {
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 5,
				},
				goodsList: [],
				total: 0,
				desc: '',
			};
		},
		onLoad() {
			this.queryGoods();
		},
		methods: {
			handleLower() {
				// 加载更多
			},
			queryGoods() {
				this.$http.get({
					url: apis.getGoodsList,
					data: this.queryParam,
				}).then(res => {
					if (res.code === 200) {
						this.goodsList = [...this.goodsList, ...res.rows];
						this.total = res.total;
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				})
			},
			handleImagePath(path) {
				return apis.imgUrl + '/' + apis.imgBucket +  '/' + path;
			},
			buyGoods(row) {
				// 处理请求参数
				const goodsData = {
					detailList: [
						{
							goodsId: row.id,
							buyCount: 1
						}
					]
				}
				// 兑换商品
				this.$http.post({
					url: apis.addOrder,
					data: goodsData,
				}).then(res => {
					if (res.code === 200) {
						// 兑换成功
						uni.showToast({
							title: '兑换成功',
							icon: 'none',
							duration: 1500,
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/order/order'
							})
						}, 1500);
					} 
				}).catch(err => {
					console.log('调用接口失败：', err);
					let msg = '兑换失败';
					if (err.data && err.data.msg) {
						msg = err.data.msg;
					}
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 1500,
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	
	.tcr-shop {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		
		.tcr-shop-list {
			height: 100vh;
		}
		
		&-card {
			display: flex;
			padding: 20rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
			
			
			&-img {
				width: 140rpx;
				
				>image {
					width: 140rpx;
					height: 140rpx;
				}
				
			}
			
			&-desc {
				margin-left: 20rpx;
				flex: 1;
				
				&-title {
					
				}
				
				&-desc {
					font-size: 30rpx;
					color: #666666;
					margin: 10rpx 0;
				}
				
				&-count{
					font-size: 30rpx;
					text-align: right;
					color: #999999;
				}
				
				&-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					
					.tcr-shop-card-desc-point {
						font-size: 38rpx;
						color: #ff4c4c;
					}
				}
			}
			
		}
	}

</style>
